<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href=""> -->
    <!-- <script  src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.esm-browser.prod.js"></script> -->
</head>
<body>
    <!-- 
        jsonp 原理:  引入资源不受同源策略影响 (link img script 可以引入外部资源, 不受同源策略影响)

            前端: 
               1. 可以创建script标签(手动创建, dom生成), 向对方服务器接口发送请求, 并将请求过来的内容,作为js代码执行
               2. 前端需要提前指定函数 (回调函数)
            后端:  (需要后端配合)
               返回以函数调用格式的数据  => xxx({"a":1,"b":2})


     -->

     <!-- <img src="https://img14.360buyimg.com/jdcms/s460x460_jfs/t1/133666/20/41053/28070/65d35216F487ca258/8f5a73074109e11e.jpg.avif" alt=""> -->
     <!-- <script type="module">
         import * as Vue  from  "https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.esm-browser.prod.js"
         console.log(Vue);
     </script> -->

     <script>

        // 提前指定函数
        function fn(data){
            console.log(1111, data);
        }

     </script>
</body>


<!-- <script type="text/javascript"></script> -->
<!-- 将载入过来的内容作为js语句执行 -->
<!-- <script src="./data/1.txt"></script> -->

<!-- 模拟向对方服务器发送请求,对方返回数据 -->
<!-- <script src="./data/data.txt">
    [1,2,3,4]
</script> -->


<script src="./data/jsonp.txt">
    fn([1,2,3,4])
</script>
</html>